<template>
    <view class="text_contain">
        <!-- 步骤条 -->
        <view class="step">
            <uni-steps :options="list" active-color="#00aa00" :active="active" direction="column" />
        </view>
        <!-- 订单书籍信息 -->
        <view class="bookText">
            <view class="book" v-for="(order,index) in REquestOrder.sellbook" :key="index">
                <!-- 左边 -->
                <view class="left">
                    <image :src="order.book_img"></image>
                </view>
                <!-- 右边 -->
                <view class="right">
                    <view class="name">
                        <text>{{order.book_name}}</text>
                    </view>
                    <view class="price">
                        <text>预估：￥{{order.book_price*order.book_count}}</text>
                    </view>
                    <view class="num">
                        <text>x{{order.book_count}}</text>
                    </view>
                </view>
            </view>
        </view>
        <!-- 订单状态 -->
        <view class="order_state">
            <view class="order_id">
                <text>订单编号</text>
                <text>{{REquestOrder.order_id}}</text>
            </view>
            <view class="count">
                <text>订单数量</text>
                <text>{{REquestOrder.count}}本</text>
            </view>
            <view class="money">
                <text>卖书收入</text>
                <text>￥{{REquestOrder.money}}</text>
            </view>
            <view class="state">
                <text>订单状态</text>
                <text v-if="REquestOrder.orderState === 0" style="color: red;font-weight: 600;">待审核</text>
                <text v-if="REquestOrder.orderState === 1" style="color:#00aa00;font-weight: 600;">审核通过</text>
                <text v-if="REquestOrder.orderState === 2" style="color:#676767;font-weight: 600;">审核未通过</text>
            </view>
        </view>
        <!-- 底部按钮 -->
        <view class="buttombox">
            <button @click="chooseAddress">修改地址</button>
            <button @click="delOrder">取消订单</button>
        </view>
    </view>
</template>

<script>
    import {
        mapState,
        mapMutations,
        mapGetters
    } from 'vuex'

    export default {
        data() {
            return {
                //当前订单的具体信息
                REquestOrder: {},
                //步骤事件
                active: 0,
                list: [{
                    title: '回收订单提交',
                    desc: '',
                }, {
                    title: '线上初审中',
                    desc: ''
                }, {
                    title: '商家签收',
                    desc: ''
                }, {
                    title: '交易完成',
                    desc: ''
                }]
            };
        },
        onLoad(options) {
            this.REquestOrder = this.order.filter(x => x.order_id === options.id)
            this.REquestOrder = {
                "order_id": 1,
                "sellbook": [{
                    "book_id": 4,
                    "book_ISBN": 9787501615004,
                    "book_name": "草鞋湾4",
                    "book_price": 3.15,
                    "book_state": false,
                    "sell_state": 1,
                    "book_img": "https://static.botue.com/ugo/uploads/pic_floor01_title.png",
                    "book_count": 1,
                    "book_fascicle": false
                }, {
                    "book_id": 5,
                    "book_ISBN": 9787501615005,
                    "book_name": "草鞋湾5",
                    "book_price": 3.15,
                    "book_state": false,
                    "sell_state": 1,
                    "book_img": "https://static.botue.com/ugo/uploads/pic_floor01_title.png",
                    "book_count": 5,
                    "book_fascicle": true
                }, {
                    "book_id": 1,
                    "book_ISBN": 9787501615001,
                    "book_name": "草鞋湾1",
                    "book_price": 3.15,
                    "book_state": false,
                    "sell_state": 1,
                    "book_img": "https://static.botue.com/ugo/uploads/pic_floor01_title.png",
                    "book_count": 1,
                    "book_fascicle": false
                }, {
                    "book_id": 2,
                    "book_ISBN": 9787501615002,
                    "book_name": "草鞋湾2",
                    "book_price": 3.15,
                    "book_state": false,
                    "sell_state": 1,
                    "book_img": "https://static.botue.com/ugo/uploads/pic_floor01_title.png",
                    "book_count": 1,
                    "book_fascicle": false
                }],
                "count": 8,
                "money": "25.20",
                "sellTime": "2024-05-25 09:24:31",
                "addstr": "广东省广州市海珠区新港中路397号",
                "orderState": 0
            }
        },
        computed: {
            ...mapState('sellOrderStore', ['order']),
        },
        methods: {
            ...mapMutations('UserStore', ['updateAddress']),
            ...mapMutations('sellOrderStore', ['updataAddstr', 'deleteOrder']),
            // 修改收货地址
            async chooseAddress() {
                //调用小程序提供的 chooseAddress() 方法，即可使用选择收货地址的功能
                //返回值是一个数组：第 1 项为错误对象；第 2 项为成功之后的收货地址对象
                const res = await uni.chooseAddress({})
                //用户成功的选择了收货地址
                if (res.errMsg === 'chooseAddress:ok') {
                    const data = {
                        addstr: res,
                        id: this.REquestOrder.order_id
                    }
                    this.updataAddstr(data)
                } else {
                    return
                }
            },
            // 取消订单
            delOrder() {
                console.log(this.REquestOrder.order_id)
                this.deleteOrder(this.REquestOrder.order_id)
            }
        }
    }
</script>

<style lang="scss">
    .text_contain {
        width: 100%;
        padding: 10px;
        padding-bottom: 0px;
        background-color: #f1f1f1;
        padding-bottom: 45px;

        .step {
            margin-right: 20px;
            background-color: #fff;
        }

        .bookText {
            margin-top: 5px;
            margin-right: 20px;
            display: flex;
            flex-direction: column;
            padding: 5px;
            background-color: #fff;
            border-radius: 10px;

            .book {
                display: flex;
                margin-top: 10px;
                border-bottom: 1px solid #d8d8d8;

                .left {
                    margin-left: 20px;

                    image {
                        width: 80px;
                        height: 80px;
                        object-fit: cover;
                        margin-top: 3px;
                    }
                }

                .right {
                    display: flex;
                    flex-direction: column;
                    width: 100%;

                    .name {
                        text {
                            font-size: 18px;
                            font-weight: 600;
                        }
                    }

                    .price {
                        margin-top: 10px;
                        font-size: 12px;
                        color: #676767;
                    }

                    .num {
                        margin-top: 10px;
                        font-weight: 600;
                        display: flex;
                        justify-content: flex-end;
                    }
                }
            }
        }

        .order_state {
            display: flex;
            flex-direction: column;
            margin-top: 10px;
            margin-right: 20px;
            padding: 10px;
            background-color: #fff;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 500;

            .order_id {
                display: flex;
                justify-content: space-between;
            }

            .count {
                margin-top: 10px;
                display: flex;
                justify-content: space-between;
            }

            .money {
                margin-top: 10px;
                display: flex;
                justify-content: space-between;
            }

            .state {
                border-top: 1px solid #d8d8d8;
                margin-top: 10px;
                display: flex;
                justify-content: space-between;

            }
        }

        .buttombox {
            width: 100%;
            margin-top: 10px;
            margin-right: 20px;
            border-top: 1px solid #d8d8d8;
            background-color: #fff;
            display: flex;
            justify-content: space-around;
            padding: 7px;
            position: fixed;
            bottom: 0px;

            button {
                color: #676767;
                border: 1px solid #676767;
                height: 30px;
                width: 110px;
                line-height: 30px;
                text-align: center;
                border-radius: 20px;
                font-size: 12px;
            }
        }
    }
</style>